import 'dart:math';

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

//
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MaterialApp(
        home: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String num = '1';
  bool isFlag = true;
  Widget src = Image.network('https://picsum.photos/id/1/200/300');

  @override
  Widget build(BuildContext context) {
    double w = 32.0, h = 48;
    final span = TextSpan(
      text: 'wocao',
      style: TextStyle(fontSize: 48),
    );
    final tp = TextPainter(
      text: span,
      textDirection: TextDirection.ltr,
    )..layout();
    h = tp.height;
    w = tp.width * 2;

    return Scaffold(
      appBar: AppBar(
        title: Text('先淡出再淡入的过渡效果'),
      ),
      body: Diagonal(children: [
        Text('1'),
        Container(
          width: 30,
          height: 30,
          color: Colors.blue,
          child: Text('2'),
        ),
        FlutterLogo(
          size: 20,
        ),
        Icon(Icons.star)
      ]),
    );
  }

  Widget diagonalWidget({required List<Widget> children}) {
    return Column(
      children: [
        for (int i = 0; i < children.length; i++)
          Row(
            children: children.sublist(0, i + 1).asMap().keys.map((e) {
              return Container(
                height: e != i ? 0 : null,
                child: children[e],
              );
            }).toList(),
          )
      ],
    );
  }
}

class Diagonal extends StatelessWidget {
  final List<Widget> children;

  const Diagonal({Key? key, required this.children}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CustomMultiChildLayout(
      delegate: DiagonalLayout(),
      children: [
        for (var i = 0; i < children.length; i++)
          LayoutId(
            id: i,
            child: children[i],
          ),
      ],
    );
  }
}

class DiagonalLayout extends MultiChildLayoutDelegate {
  @override
  void performLayout(Size size) {
    Offset offset = Offset.zero;
    //不知道多少 一直遍历
    for (var i = 0;; i++) {
      //里面自带的方法
      if (hasChild(i)) {
        // 向下传递约束
        final childSize = layoutChild(i, BoxConstraints.loose(size));
        positionChild(i, offset);
        offset += Offset(childSize.width, childSize.height);
      } else {
        break;
      }
    }
  }

  @override
  bool shouldRelayout(_) => false;
}



// Container(
//           child: OutlinedButton.icon(
//             onPressed: () {},
//             icon: Icon(Icons.star),
//             label: Text('收藏'),
//             style: OutlinedButton.styleFrom(
//               side: BorderSide(color: Colors.blue, width: 2.0),
//               shape: RoundedRectangleBorder(
//                 borderRadius: BorderRadius.all(Radius.circular(10)),
//               ),
//             ),
//           ),
//         )

// Center(
//         child: Container(
//             width: 200,
//             height: 300,
//             child: InkWell(
//               onTap: () async {
//                 setState(() {
//                   src = Container();
//                 });
//                 Future.delayed(
//                     Duration(seconds: 2),
//                     () => {
//                           setState(() {
//                             num = num == '1' ? '2' : '1';
//                             src = Image.network(
//                                 'https://picsum.photos/id/${num}/200/300');
//                           })
//                         });
//               },
//               child: AnimatedSwitcher(
//                 duration: Duration(seconds: 1),
//                 child: src,
//               ),
//             )),
//       )



// Center(
//           child: Stack(
//             // clipBehavior: Clip.none, //裁剪
//             // clipBehavior: Clip.hardEdge,
//             children: [
//               Container(
//                 width: 320,
//                 height: 320,
//                 color: Colors.grey,
//               ),
//               Positioned(
//                   right: -0.01,
//                   top: sqrt(w * w / 2 - sqrt2 * w * h + h * h), //让位置处于中心
//                   child: Transform.rotate(
//                     alignment: Alignment.bottomRight, //转动中心
//                     angle: pi / 4,
//                     child: Container(
//                       color: Colors.red.withOpacity(0.8),
//                       width: w,
//                       height: h,
//                       alignment: Alignment.center,
//                       child: Text.rich(span),
//                     ),
//                   ))
//             ],
//           ),
//         )